<template>
    <el-dialog :title="!dataForm.id ? '新增' : '修改'"
               :close-on-click-modal="false"
               :visible.sync="visible">
        <el-form :model="dataForm"
                 :rules="dataRule"
                 ref="dataForm"
                 @keyup.enter.native="dataFormSubmit()"
                 label-width="90px">
            <el-form-item label="客户代码" prop="custCode">
                <el-input v-model="dataForm.custCode"></el-input>
            </el-form-item>
            <el-form-item label="客户名称" prop="custName">
                <el-input v-model="dataForm.custName"></el-input>
            </el-form-item>
            <el-form-item label="客户类型"
                          prop="custType">
                <el-select v-model="dataForm.custType" placeholder="请选择">
                    <el-option
                        v-for="item in custTypeList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所属区域">
                <el-col :span="8">
                    <el-form-item prop="province">
                        <el-select v-model="dataForm.provinceId"
                                   placeholder="请选择"
                                   @change="selectProvince">
                            <el-option v-for="province in provinceList"
                                       :key="province.areaId"
                                       :label="province.areaName"
                                       :value="province.areaId"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="city">
                        <el-select v-model="dataForm.cityId"
                                   placeholder="请选择"
                                   @change="selectCity">
                            <el-option v-for="city in cityList"
                                       :key="city.areaId"
                                       :label="city.areaName"
                                       :value="city.areaId"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="area">
                        <el-select v-model="dataForm.areaId"
                                   placeholder="请选择">
                            <el-option v-for="area in areaList"
                                       :key="area.areaId"
                                       :label="area.areaName"
                                       :value="area.areaId"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item label="所属部门"
                          prop="deptId">
                <el-select v-model="dataForm.deptId" placeholder="请选择">
                    <el-option
                        v-for="item in departList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所属负责人"
                          prop="custManId">
                <el-select v-model="dataForm.custManId" placeholder="请选择">
                    <el-option
                        v-for="item in personList"
                        :key="item.empNo"
                        :label="item.empName"
                        :value="item.empNo">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer"
              class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary"
                 @click="dataFormSubmit()">确定</el-button>
    </span>
    </el-dialog>
</template>

<script>
import { Debounce } from '@/utils/debounce'
import {custTypeList,departList} from '@/utils/data'
export default {
	data () {
		return {
			visible: false,
            custTypeList: custTypeList,
            departList: departList,
            provinceList: [],
            cityList: [],
            areaList: [],
			roleList: [],
            personList: [],
			dataForm: {
                custCode: "",
                custName: "",
                custType: "",
                custDept: "",
                deptId: "",
                area: '',
                city: '',
                province: '',
                custManId: '',
                areaId: null,
                cityId: null,
                provinceId: null
			},
			dataRule: {
			}
		}
	},
	methods: {
		init (id) {
			this.dataForm.id = id || 0
			this.visible = true
            this.listAreaByParentId().then(({ data }) => {
                this.provinceList = data
            })
            this.getPersonList();
			this.$nextTick(() => {
				this.$refs['dataForm'].resetFields()
				if (this.dataForm.id) {
					this.$http({
						url: this.$http.adornUrl('/prod/prodTag/info/' + this.dataForm.id),
						method: 'get',
						params: this.$http.adornParams()
					}).then(({ data }) => {
						this.dataForm = data
					})
				}
			})
		},
        getPersonList(){
            this.$http({
                url: this.$http.adornUrl('/crm/base/emp/page'),
                method: 'get',
                params: this.$http.adornParams(Object.assign({
                    current: 1,
                    size: 999
                }))
            }).then(({data}) => {
                this.personList = data.obj.records;
            })
        },
        listAreaByParentId (pid) {
            if (!pid) pid = 0
            return this.$http({
                url: this.$http.adornUrl(`/admin/area/listByPid`),
                method: 'get',
                params: this.$http.adornParams({ pid })
            })
        },
        // 选择省
        selectProvince (val) {
            this.dataForm.cityId = null
            this.dataForm.city = ''
            // 获取城市的select
            this.listAreaByParentId(val).then(({ data }) => {
                this.cityList = data
            })
        },
        // 选择市
        selectCity (val) {
            this.dataForm.areaId = null
            this.dataForm.area = ''
            // 获取区的select
            this.listAreaByParentId(val).then(({ data }) => {
                this.areaList = data
            })
        },
		// 表单提交
		dataFormSubmit: Debounce(function () {
			this.$refs['dataForm'].validate((valid) => {
				if (valid) {
                    let area = this.areaList.find((a) => {
                        return a.areaId === this.dataForm.areaId
                    })
                    let depart = this.departList.find((d) => {
                        return d.value === this.dataForm.deptId
                    })
                    let cust = this.personList.find((p) => {
                        return p.empNo === this.dataForm.custManId
                    })
					this.$http({
						url: this.$http.adornUrl('/crm/base/cust/saveCust'),
						method: this.dataForm.id ? 'put' : 'post',
						data: this.$http.adornData({
                            custCode: this.dataForm.custCode,
                            custName: this.dataForm.custName,
                            createDate: wfy.format("yyyy-MM-dd", new Date()),
                            areaId: this.dataForm.areaId,
                            areaName: area.areaName,
                            custType: this.dataForm.custType,
                            deptId: this.dataForm.deptId,
                            deptName: depart.label,
                            custManId: this.dataForm.custManId,
                            custManName: cust.empName
                        })
					}).then(({ data }) => {
						this.$message({
							message: '操作成功',
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.visible = false
								this.$emit('refreshDataList')
							}
						})
					})
				}
			})
		})
	}
}
</script>
